<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尺寸属性</title>

    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: tomato;
        }

        .two{
            width: 100px;
            /*  最小高度 容器的初始值位100px，但是容器会随着元素的增加而增大   */
            min-height: 100px;
            background-color: tomato;
        }

        .three{
            width: 100px;
            /*  最大高度 容器的初始值位0px，但是容器会随着元素的增加而增大 直到增加到设置的最大高度位置，元素会超出  */
            max-height: 100px;
            background-color: tomato;
        }


    </style>



</head>
<body>

<div class="one"></div>

<br>

<div class="two">
我是留言内容
我是留言内容
我是留言内容
我是留言内容
我是留言内容
我是留言内容
我是留言内容
</div>

<br>
<div class="three">
    我是留言内容
    我是留言内容
    我是留言内容
    我是留言内容
    我是留言内容
    我是留言内容
    我是留言内容
</div>




</body>
</html>